<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>38期</title>
</head>
<style>
  #main{
    width: 500px;
    height: 500px;
  }
</style>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main"></div>
  <!-- 引入 -->
  <script src="./lib/echarts.min.js"></script>
  <script>
    const arr =[
    {name:"西兰花",price:150},
    {name:"西瓜",price:230},
    {name:"西葫芦",price:224},
    {name:"西北风",price:34},
    {name:"西红柿",price:135},
    {name:"土豆",price:147},
    {name:"秋刀鱼",price:260},
]
    //处理数据
    const name = []
    const price = []
    arr.forEach(item=>{
      name.push(item.name)
      price.push(item.price)
    })

    var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: name,
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: price,
      type: 'line',
      smooth: false,
    }
  ]
};

option && myChart.setOption(option);

  </script>
</body>

</html>